<template>
    <div>
        <el-dialog title="编辑党费上交信息" :visible.sync="dialogVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="rowdata" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="党委名称" prop="dwname">
                        <el-input v-model="rowdata.dwname" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="党支部名称" prop="dzbname">
                        <el-input v-model="rowdata.dzbname" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="年份" prop="year">
                        <el-input v-model="rowdata.year" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="月份" prop="month">
                        <el-input v-model="rowdata.month" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="应交数额" prop="needJiao">
                        <el-input v-model="rowdata.needJiao" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="上交数额" prop="trueJiao">
                        <el-input v-model="rowdata.trueJiao" style="width: 80%;"></el-input>
                    </el-form-item>

                    <el-form-item label="上交时间" prop="time">
                        <el-date-picker v-model="rowdata.time" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="清单文件" prop="content">
                        <el-input placeholder="请选择文件" v-model="rowdata.content" :disabled="true">
                            <template slot="append">
                                <el-button type="primary" @click="clickfile">选择</el-button>
                                <input type="file" id="inputfile" style="display: none;"  ref="inputfile" @change="changefile">
                            </template>
                        </el-input>
                    </el-form-item>
                     <el-form-item label="清单存放" prop="stroe">
                        <el-input v-model="rowdata.stroe" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;">
                    <el-button :loading="disabled" :disabled="disabled" style="margin: 0 auto;display: block;"  type="primary" @click="checksubmit('rowdata')">确定并保存<i class="el-icon-upload el-icon--right" ></i></el-button>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data() {
            return { 
                dialogVisible: false, 
                rowdata:{
                    year:'',
                    month:'',
                    dwid:'',
                    dwname:'',
                    dzbid:'',
                    dzbname:'',
                    needJiao:'',
                    trueJiao:'',
                    stroe:'',
                    time:'',
                    truesrc:'',
                },
                files:[],
                truesrcs:[],
                rules: {
                    yearmonth: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    truename: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    personid: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    needJiao: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    trueJiao: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    time: [{ required: true, message: '不能为空', trigger: 'blur' }],
                },
                disabled:false,
            };
            
        },
        mounted() {  
           
        },
        components: {},
        watch: {
        },
        methods: {
            ...mapActions(['GetPersons']),
            clickfile(){
                let _this=this;
                setTimeout(function(){
                    _this.$refs.inputfile.click();
                },50)
            },
            changefile(event){
                this.files=[];
                for (let index = 0; index < event.srcElement.files.length; index++) {
                    const element = event.srcElement.files[index];
                    this.files.push(element);
                    
                }
                if(this.files.length==1){
                    this.rowdata.content=this.files[0].name;
                }
                var inputfile = document.getElementById('inputfile');
                inputfile.value = ''; 

            },
            uploadFile(){
                this.Visible=true;
                this.$upload.set_options({
                    file:this.files,
                    action:this.$Common.Config.url,
                    data:{
                        type:'uploadfile',
					    token:this.$Common.GetStorage('token')
                    },
                    onProgress:this.onProgress,
                    onSuccess:this.onSuccess,
                    onError:this.onError,
                })
            },
            onProgress(value,index,length){
                this.percentage=value;
            },
            onSuccess(filename){
                this.Visible=false;
                this.truesrcs=filename;
                this.uploadToServe();
            },
            onError(message){
                this.$message({
                    message:message,
                    type:'error'
                });
                this.Visible=false;
                this.disabled=false;
            },
            checksubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.disabled=true;
                        this.uploadFile();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            uploadToServe(){
                let _this=this;
                this.uploadToServeData={};
                this.uploadToServeData.year=this.rowdata.year;
                this.uploadToServeData.month=this.rowdata.month;
                this.uploadToServeData.dwid=this.rowdata.dwid;
                this.uploadToServeData.dzbid=this.rowdata.dzbid;
                this.uploadToServeData.needJiao=this.rowdata.needJiao;
                this.uploadToServeData.trueJiao=this.rowdata.trueJiao;
                this.uploadToServeData.time=this.rowdata.time;
                this.uploadToServeData.stroe=this.rowdata.stroe;
                if(this.truesrcs.length>0){
                    this.uploadToServeData.truesrc=this.truesrcs[0];
                }
                
                console.log(this.uploadToServeData);
                let postdata={
                    type:"updatedangfeitime",
                    split:JSON.stringify(this.uploadToServeData)
                }
                let ajaxp= this.$Common.AjaxPostSync(postdata,true);
                if(ajaxp.Status==true){
                    this.disabled=false;
                    this.$message("更新成功");
                    this.$emit('editResult')
                    this.dialogVisible=false;
                }
                else{
                    his.disabled=false;
                    this.$message("更新失败");
                }
            },
        },

    }
</script>
<style>
</style>